<template>
  <div class="index">
    <!-- swiper -->
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
      <van-swipe-item v-for="(item,index) in swiperItemList" :key="index" v-on:click="goWangYi">
        <van-image width="100%" height="100%" :src="item.pic"></van-image>
        <span :style="{backgroundColor:item.titleColor}">{{item.typeTitle}}</span>
      </van-swipe-item>
    </van-swipe>
    <!-- 内容区 -->
    <div class="items">
      <!-- 歌单 -->
      <div class="first item">
        <div class="t">
          <h2>推荐歌单</h2>
          <span class="showMore" v-on:click="$router.push('/gedanlist')">查看更多 &gt;</span>
        </div>
        <ul>
          <li v-for="(item) in gedanList" :key="item.id" v-on:click="$router.push(`/gedandetail?id=${item.id}`)">
            <van-image width="100%" height="100%" :src="item.picUrl"></van-image>
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
      <!-- mv -->
      <div class="second item">
        <div class="t">
          <h2>推荐MV</h2>
          <span class="showMore" v-on:click="$router.push('/mvlist')">查看更多 &gt;</span>
        </div>
        <ul>
          <li v-for="(item) in mvList" :key="item.id" v-on:click="$router.push(`/mvDetail?id=${item.id}`)">
            <van-image width="100%" height="100%" :src="item.picUrl"></van-image>
            <span>{{item.name}}</span>
          </li>
        </ul>
      </div>
      <!-- 歌曲 -->
      <div class="third item">
        <div class="t">
          <h2>推荐歌曲</h2>
          <span class="showMore" v-on:click="$router.push('/musiclist')">查看更多 &gt;</span>
        </div>
        <ul>
          <li v-for="(item) in musicList" :key="item.id" v-on:click="$router.push(`/play?id=${item.id}`)">
            <span>{{item.name}}</span>
            <span>{{item.song.artists[0].name}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getBanner, getTuijiangedan, getTuijianmv, getTuijiansong } from '../../../utils/api'
export default {
  data () {
    return {
      // swiper图片数组
      swiperItemList: [],
      // 歌单数组
      gedanList: [],
      // mv数组
      mvList: [],
      // 歌曲数组
      musicList: [],
    };
  },
  mounted () {
    // 返回顶部
    window.scroll(0, 0);
    this.getBannerFn();
    this.getTuijiangedanFn(8);
    this.getTuijianmvFn();
    this.getTuijiansongFn();
  },
  methods: {
    // 获取推荐歌单
    async getTuijiangedanFn (num) {
      let result = await getTuijiangedan(num);
      if (result.code === 200) {
        this.gedanList = result.result;
      }
    },
    // 获取banner图片
    async getBannerFn () {
      let result = await getBanner();
      if (result.code === 200) {
        this.swiperItemList = result.banners;
      }
    },
    // 获取mv
    async getTuijianmvFn () {
      let result = await getTuijianmv();
      if (result.code === 200) {
        this.mvList = result.result;
      }
    },
    // 获取歌曲
    async getTuijiansongFn () {
      let result = await getTuijiansong();
      if (result.code === 200) {
        this.musicList = result.result;
      }
    },
    // 前往网易官网
    goWangYi () {
      window.location.href = 'http://music.163.com';
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../css/vars.less';
 .index{
   margin-bottom: 120/50rem;
   margin-top: 100/50rem;
 }
 .my-swipe {
   .van-swipe-item {
     span{
       position: absolute;
       display: inline-block;
       width: 100/50rem;
       height: 40/50rem;
       color: @backWhite;
       text-align: center;
       line-height: 40/50rem;
       font-size: 20/50rem;
       font-weight: 600;
       z-index: 99;
       bottom: 0;
       right: 0;
     }
   }
   /deep/ .van-swipe__track {
     height: 300/50rem;
   }
   /deep/ .van-swipe__indicator{
     height: 20/50rem;
     width: 20/50rem;
   }
 }
 .item .t{
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: @backWhite;
   h2{
     font-size: 35/50rem;
     font-weight: 500;
     padding-left: 20/50rem;
   }
   .showMore{
     color: #ccc;
     padding-right: 20/50rem;
     font-size: 25/50rem;
   }
 }
 .first,.second{
   margin-top: 10/50rem;
   ul{
     white-space: nowrap;
     overflow-x: auto;
     overflow-y: hidden;
     padding: 20/50rem 0 20/50rem 20/50rem;
     background-color: @backWhite;
     &::-webkit-scrollbar { width: 0 !important }
     li{
       height: 5rem;
       margin-right: 20/50rem;
       display: inline-block;
       border-radius: 30/50rem;
       overflow: hidden;
       position: relative;
       span{
         position: absolute;
         background-color: rgba(0,0,0,.5);
         left: 0;
         bottom: 0;
         font-size: 0.65rem;
         color: @backWhite;
         overflow: hidden;
         text-align: center;
       }
     }
   }
 }
 .first{
   ul{
     height: 260/50rem;
     li{
       width: 5rem;
       span{
         width: 5rem;
         height: 1.6rem;
         display: -webkit-box;
         white-space: normal !important;
         text-overflow: ellipsis;
         word-wrap: break-word;
         -webkit-line-clamp: 2; 
         -webkit-box-orient: vertical;
         line-height: 1.2;
       }
     }
   }
 }
 .second{
   ul{
     height: 260/50rem;
     li{
       width: 8rem;
       span{
         display: inline-block;
         width: 8rem;
         height: 1rem;
         white-space: nowrap !important;
         text-overflow: ellipsis;
         line-height: 1rem;
       }
     }
   }
 }
 .third{
  ul{
    background-color: @backWhite;
    padding-bottom: 10/50rem; 
    li{
      height: 1.8rem;
      padding: 20/50rem;
      display: flex;
      flex-direction: column;
      position: relative;
      justify-content: space-around;
      &::after{
        position: absolute;
        content: '';
        pointer-events: none;
        right: 20/50rem;
        bottom: 0;
        left: 20/50rem;
        border-bottom: 1px solid #ebedf0;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
      }
      &::before{
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: 0;
        height: 0;
        transform: translateY(-50%);
        display: inline-block;
        border: 20/50rem solid transparent;
        border-left-color: #ccc;
        margin-right: 30/50rem;
      }
      span:nth-child(1){
        font-size: 0.7rem;
      }
      span:nth-child(2){
        color: #888;
        font-size: 28/50rem;
      }
    }
  }
 }
 
</style>

